<template>
	<view class="shop-info-page" v-if="playerDetail.usertype">
		<!--标题栏-->
		<view class="fixed">
			<bar-title bgColor="bg-shadeTop text-white"
				:isBack="true"
				:isSolid="false"
			>
				<block slot="content"></block>
			</bar-title>
		</view>
		
		<view class="top">
			<view class="player-bg">
				<image class="bg" :src="playerDetail.headurl" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="publisher-info" v-if="playerDetail.usertype">
			<view class="info-loge">
				<image class="logo" :src="playerDetail.headurl" mode="widthFix"></image>
				<div class="vip"></div>
			</view>
			<view class="info-warp">
				<view class="info-title">
					<text class="name">{{playerDetail.nickname}}</text>
					<text class="city">{{playerDetail.city}}</text>
				</view>
				<view class="info-desc">{{playerDetail.autograph}}</view>
			</view>
			
			<view class="moudel-fanlist">
				<view class="fanlist-warp">
					<view class="fanlist-item">
						<view class="fanlist-item_num">{{playerDetail.attentNum}}</view>
						<view class="fanlist-item_name">关注</view>
					</view>
					<view class="fanlist-item">
						<view class="fanlist-item_num">{{playerDetail.fansNum}}</view>
						<view class="fanlist-item_name">粉丝</view>
					</view>
					<view class="fanlist-item">
						<view class="fanlist-item_num">{{playerDetail.praiseNum}}</view>
						<view class="fanlist-item_name">喜欢Ta</view>
					</view>
				</view>
			</view>
		</view>
					  
		<view class="nav-list bg-white">
			<view class="nav z">
				<block v-for="(item, index) in navList" :key="index">
					<view class="cu-item"
						:class="index==tabCurrentIndex ? 'select' : ''"
						@tap="tabSelect"
						:data-index="index"
					>
						<view>{{ item.text }}</view>
						<view class="tab-dot bg-black"></view>
					</view>
				</block>
			</view>
		</view>
		
		<!-- 显示区域 -->
		<swiper :current="tabCurrentIndex" 
			class="swiper-box bg-white"
			duration="300" 
			:style="[{height:'calc(100vh - '+ navigationBarHeight + 'px - 90rpx)'},{top: navigationBarHeight + 'px'}]"
			@change="changeTab">
			<swiper-item class="tab-content"  >
				<scroll-view 
					class="list-scroll-content" 
					scroll-y
					@scrolltolower="loadData"
				>	
					<!-- 空白页 -->
					<empty v-if="navList[0].loaded === true && navList[0].list.length === 0"></empty>
					
					
					<!-- 列表 -->
					<view class="activity-list">
						<WaterfallsFlow :wfList='navList[0].list' @itemTap="itemTap" />
					</view>
					 
					<uni-load-more :status="navList[0].loadingType"></uni-load-more>
					
				</scroll-view>
			</swiper-item>
				
			
			
			<swiper-item class="tab-content"  >
				<scroll-view 
					class="list-scroll-content" 
					scroll-y
					@scrolltolower="loadData"
				>
				
					<!-- 空白页 -->
					<empty v-if="navList[1].loaded === true && navList[1].list.length === 0"></empty>
					
					<!-- 订单列表 -->
					<view class="shopInfo-list">
						<block v-for="(item,index) in navList[1].list" :key="index">
							<ViewScenario :activity="item" ></ViewScenario>
						</block>
					</view>
					 
					<uni-load-more :status="navList[1].loadingType"></uni-load-more>
					
				</scroll-view>
			</swiper-item>
			
			
			
		</swiper>
		
	</view>
</template>

<script>

import ViewScenario from '@/components/box/ViewScenario.vue';
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import empty from "@/components/basics/empty.vue";
import { User } from '@/models/user.js';
let user = new User()
export default {
	components: {
		ViewScenario,
		uniLoadMore,
		empty
	},
	data() {
		return {
			othername: '',
			playerDetail: {},
			tabCurrentIndex: 0,
			navList: [
				{
					id: 1,
					text: '动态',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				},
				{
					id: 2,
					text: '剧本',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				}
			],
		};
	},
	computed: {
		statusBarHeight(){
			return this.systemInfo.statusBarHeight
		},
		navigationBarHeight(){
			return this.systemInfo.navigationBarHeight;
		},
		customWidth(){
			return this.systemInfo.custom.width;
		},
		customHeight(){
			return this.systemInfo.custom.height;
		},
		//小程序右侧需要留出气泡空间
		headerPaddingRight(){
			// #ifndef MP
			return 0;
			// #endif
			// #ifdef MP-WEIXIN
			return this.customWidth + 20;
			// #endif
		},
	},
	onLoad(option) {
		if(option && option.othername) {
			this.othername = option.othername || 'cp17391785932'
			this.getPlayerInfo()
			this.loadData()
		}
		
	},
	onShow() {
		
	},
	methods: {
		//顶部tab点击
		tabSelect(e) {
			this.tabCurrentIndex = e.currentTarget.dataset.index;
		},
		//swiper 切换
		changeTab(e){
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		loadData(source){
			console.log(0);
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			if(source === 'tabChange' && navItem.loaded === true){
				//tab切换只有第一次需要加载数据
				return;
			}
			if(navItem.loadingType === 'loading'){
				//防止重复加载
				return;
			}
			navItem.loadingType = 'loading';
			
			switch(index) {
				case 0: 
					this.getPayerDy(navItem)
				break;	
				case 1: 
					this.getPayerScen(navItem)
				break;
			}	
		}, 
		async getPayerDy(navItem) {
			console.log('getPayerDy');
			navItem.pagenum = navItem.pagenum + 1
			let newList = await user.getPayerDy(navItem.pagenum, this.othername)
			navItem.loaded = true
			newList.forEach(item => {
				navItem.list.push(item)
			})
			if (newList.length < 20) {
				navItem.loadingType = 'noMore'
				return
			}
			navItem.loadingType = 'more'
		},
		async getPayerScen(navItem) {
			navItem.pagenum = navItem.pagenum + 1
			let newList =await user.getPayerScen(navItem.pagenum,this.othername)
			navItem.loaded = true
			newList.forEach(item => {
				navItem.list.push(item)
			})
			if (newList.length < 20) {
				navItem.loadingType = 'noMore'
				return
			}
			navItem.loadingType = 'more'
		},
		
		async getPlayerInfo() {
			let playerDetail = await user.getPlayerInfo(this.othername)
			console.log(playerDetail);
			this.playerDetail = playerDetail
		},
		
	}
}
</script>

<style lang="scss" scoped>
.fixed {
	position: fixed;
	z-index: 99;
}
.player-bg{
	height: 563rpx;
	background-color: #F1F1F1;
	overflow: hidden;
	position: relative;
	z-index: 10;
	&::after{
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 12;
		background-color: rgba(0,0,0,0.36);
	}
	.bg{
		width: 100%;
		position: relative;
		z-index: 11;
	}
}
.publisher-info{
	background-color: #FFFFFF;
	border-radius: 20rpx 20rpx 0 0;
	padding-top: 32rpx;
	position: relative;
	z-index: 13;
	top: -295rpx;
	margin-bottom: -275rpx;
	min-height: 312rpx;
	.info-loge{
		width: 140rpx;
		height: 140rpx;
		position: absolute;
		z-index: 13;
		top: -100rpx;
		left: 50%;
		border-radius: 50%;
		border: 4rpx solid #e1e1e1;
		margin-left: -74rpx;
	}
	.logo{
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}
	.info-warp{
		text-align: center;
		margin: 22rpx 32rpx 0;
	}
	.info-title{
		color: #333333;
		font-size: 32rpx;
		line-height: 44rpx;
		text-align: center;
		vertical-align: middle;
		.name{
			font-size: 32rpx;
			color: #000;
			margin-right: 20rpx;
		}
		.city {
			background-color: #2ebac2;
			font-size: 24rpx;
			padding: 4rpx 16rpx;
			border-radius: 20rpx;
			color: #fff;
		}
	}
	.info-desc{
		margin-top: 20rpx;
		font-size: 26rpx;
		line-height: 32rpx;
		color: #666666;
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
	}
}

.moudel-fanlist {
    position: relative;
    z-index: 21;
    background: #fff;
    padding: 32rpx 0 24rpx;
	.fanlist-warp {
	    display: flex;
	    list-style: none;
	}
	.fanlist-item {
	    flex: 1;
	    text-align: center;
	}
	.fanlist-item_num {
	    color: #000;
	    font-size: 36rpx;
	    font-weight: 700;
	}
	.fanlist-item_name {
	    color: #999;
	    font-size: 22rpx;
	}
}
.nav-list{
	text-align: center;
	.nav{
		position: sticky;
		top: 0;
		.cu-item{
			color: #999999;
			font-size: 32rpx;
			position: relative;
		}
		.select{
			color: #333333;
			font-size: 36rpx;
			&::after{
				content: '';
				position: absolute;
				height: 6rpx;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #333333;
				border-radius: 6rpx;
			}
		}
	}
}
.list-scroll-content{
	height: 100%;
}
</style>